<template>
  <div class="recharge-records">
    <div class="header">
      <h1>消费记录</h1>
    </div>

    <!-- 记录列表 -->
    <div class="records-table" v-loading="loading">
      <el-table :data="records" style="width: 100%">
        <el-table-column prop="id" label="订单号" width="180" />
        <el-table-column prop="type" label="类型">
          <template #default="{ row }">
            {{ getTypeLabel(row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="points" label="积分变动">
          <template #default="{ row }">
            <span :class="{ 'text-success': row.change > 0, 'text-danger': row.change < 0 }">
              {{ row.change > 0 ? '+' : '' }}{{ row.change }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="账户余额">
          <template #default="{ row }">
            {{ row.balance }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="说明" />
        <el-table-column prop="create_time" label="时间" width="180">
          <template #default="{ row }">
            {{ formatTime(row.create_time) }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { apiRequest } from '../../config/api'

// 数据
const loading = ref(false)
const records = ref([])

// 分页数据
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 获取消费记录列表
const getRecords = async () => {
  loading.value = true
  try {
    const params = new URLSearchParams({
      page: String(pagination.page),
      pageSize: String(pagination.pageSize)
    })

    const response = await apiRequest(`/points/logs?${params.toString()}`, {
      method: 'GET'
    })

    if (response.code === 200) {
      records.value = response.data.list
      pagination.total = response.data.total || 0
      pagination.page = response.data.page || pagination.page
      pagination.pageSize = response.data.pageSize || pagination.pageSize
    } else {
      ElMessage.error(response.message || '获取消费记录失败')
    }
  } catch (error) {
    console.error('获取消费记录失败:', error)
    ElMessage.error('获取消费记录失败')
  } finally {
    loading.value = false
  }
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN')
}

// 获取消费类型标签
const getTypeLabel = (type) => {
  const typeMap = {
    consume: '消费',
    recharge: '充值',
    refund: '退款'
  }
  return typeMap[type] || type
}

// 分页处理
function handleSizeChange(size) {
  pagination.pageSize = size
  pagination.page = 1
  getRecords()
}

function handleCurrentChange(page) {
  pagination.page = page
  getRecords()
}

// 页面加载时获取数据
onMounted(() => {
  getRecords()
})
</script>

<style scoped>
.recharge-records {
  min-height: 100vh;
  background: #18181c;
  padding: 24px;
  color: #909399;
}

.header {
  margin-bottom: 32px;
}

.header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: #909399;
}

.records-table {
  background: #23232a;
  border-radius: 12px;
  padding: 20px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Element Plus 暗色主题覆盖 */
:deep(.el-table) {
  background: transparent !important;
  color: #909399 !important;
}

:deep(.el-table th) {
  background: #2a2a2a !important;
  color: #909399 !important;
  border-bottom: 1px solid #333 !important;
}

:deep(.el-table tr) {
  background: #23232a !important;
  color: #909399 !important;
}

:deep(.el-table td) {
  border-bottom: 1px solid #333 !important;
  color: #909399 !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background: #2a2a2a !important;
}

:deep(.el-button) {
  background: #2a2a2a !important;
  border-color: #333 !important;
  color: #909399 !important;
}

:deep(.el-button:hover) {
  background: #333 !important;
  border-color: #409eff !important;
  color: #409eff !important;
}

:deep(.el-button--primary) {
  background: #409eff !important;
  border-color: #409eff !important;
  color: #18181c !important;
}

:deep(.el-button--primary:hover) {
  background: #66b1ff !important;
  border-color: #66b1ff !important;
  color: #18181c !important;
}

:deep(.el-select),
:deep(.el-date-editor) {
  background: #23232a !important;
}

:deep(.el-input__wrapper) {
  background: #23232a !important;
  box-shadow: 0 0 0 1px #333 inset !important;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset !important;
}

:deep(.el-input__inner) {
  color: #909399 !important;
}

:deep(.el-select-dropdown) {
  background: #23232a !important;
  border: 1px solid #333 !important;
}

:deep(.el-select-dropdown__item) {
  color: #909399 !important;
}

:deep(.el-select-dropdown__item:hover),
:deep(.el-select-dropdown__item.hover) {
  background: #2a2a2a !important;
  color: #409eff !important;
}

:deep(.el-select-dropdown__item.selected) {
  background: #2a2a2a !important;
  color: #409eff !important;
  font-weight: bold;
}

:deep(.el-popper.is-light) {
  background: #23232a !important;
  border: 1px solid #333 !important;
}

:deep(.el-popper.is-light .el-popper__arrow::before) {
  background: #23232a !important;
  border-color: #333 !important;
}

:deep(.el-select .el-input .el-input__wrapper) {
  background: #23232a !important;
  box-shadow: 0 0 0 1px #333 inset !important;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 1px #409eff inset !important;
}

:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected) {
  background: #2a2a2a !important;
}

:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover) {
  background: #333 !important;
}

:deep(.el-select-dropdown__empty) {
  color: #909399 !important;
  padding: 10px;
}

:deep(.el-popper.is-pure) {
  background: #23232a !important;
  border: 1px solid #333 !important;
  color: #909399 !important;
}

:deep(.el-date-editor .el-range-input) {
  color: #909399 !important;
  background: transparent !important;
}

:deep(.el-date-editor .el-range-separator) {
  color: #909399 !important;
}

:deep(.el-picker-panel) {
  background: #23232a !important;
  border: 1px solid #333 !important;
}

:deep(.el-date-table th) {
  color: #909399 !important;
  border-bottom: 1px solid #333 !important;
}

:deep(.el-date-table td) {
  color: #909399 !important;
}

:deep(.el-date-table td.next-month),
:deep(.el-date-table td.prev-month) {
  color: #606266 !important;
}

:deep(.el-date-table td.current:not(.disabled)) {
  background: #409eff !important;
  color: #18181c !important;
}

/* 暗色主题样式 */
:deep(.el-pagination) {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-pagination .el-pager li) {
  background: #333 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  margin: 0 2px !important;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: #409eff !important;
  color: #fff !important;
}

:deep(.el-pagination button) {
  background: #333 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  margin: 0 2px !important;
}

:deep(.el-pagination button:hover) {
  background: #444 !important;
  border-color: #555 !important;
}

:deep(.el-pagination button:disabled) {
  background: #222 !important;
  color: #666 !important;
  border-color: #333 !important;
}

/* 每页数量选择器样式覆盖 - 去掉白边 */
:deep(.el-pagination .el-select) {
  background: #23232a !important;
  border: none !important;
  border-radius: 4px !important;
}

:deep(.el-pagination .el-select .el-input) {
  background: #23232a !important;
  border: none !important;
}

:deep(.el-pagination .el-select .el-input__wrapper) {
  background: #23232a !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 4px !important;
}

:deep(.el-pagination .el-select .el-input__inner) {
  background: #23232a !important;
  color: #909399 !important;
  border: none !important;
  padding: 0 8px !important;
}

:deep(.el-pagination .el-select .el-select__caret) {
  color: #909399 !important;
}

/* 针对每页数量选择的下拉框 - 去掉白边 */
:deep(.el-pagination__sizes .el-select) {
  background: #23232a !important;
  border: none !important;
  border-radius: 4px !important;
}

:deep(.el-pagination__sizes .el-select .el-input__wrapper) {
  background: #23232a !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 4px !important;
}

:deep(.el-pagination__sizes .el-select .el-input__inner) {
  background: #23232a !important;
  color: #909399 !important;
  border: none !important;
  padding: 0 8px !important;
}

/* 专门针对每页数量选择器 - 去掉白边 */
:deep(.el-pagination__sizes) {
  background: transparent !important;
}

:deep(.el-pagination__sizes .el-select .el-input) {
  background: #23232a !important;
  border: none !important;
  border-radius: 4px !important;
}

:deep(.el-pagination__sizes .el-select .el-input:focus) {
  border: none !important;
  box-shadow: none !important;
}

/* 下拉选项样式 */
:deep(.el-select-dropdown) {
  background: #23232a !important;
  border: 1px solid #333 !important;
}

:deep(.el-select-dropdown__item) {
  color: #909399 !important;
}

:deep(.el-select-dropdown__item.hover) {
  background: #2a2a2a !important;
}

:deep(.el-select-dropdown__item.selected) {
  background: #2a2a2a !important;
  color: #409eff !important;
}

/* 强制覆盖所有分页组件内的选择器背景 - 去掉白边 */
:deep(.pagination-wrapper .el-select),
:deep(.pagination-wrapper .el-select *),
:deep(.el-pagination .el-select),
:deep(.el-pagination .el-select *) {
  background: #23232a !important;
  background-color: #23232a !important;
  color: #909399 !important;
  border: none !important;
  border-color: transparent !important;
}

/* 专门针对每页数量选择器的所有状态 - 去掉白边 */
:deep(.el-pagination__sizes .el-select:hover),
:deep(.el-pagination__sizes .el-select:focus),
:deep(.el-pagination__sizes .el-select:active) {
  background: #23232a !important;
  border: none !important;
}

:deep(.el-pagination__sizes .el-select .el-input:hover),
:deep(.el-pagination__sizes .el-select .el-input:focus),
:deep(.el-pagination__sizes .el-select .el-input:active) {
  background: #23232a !important;
  border: none !important;
}

/* 强制覆盖所有输入框背景 */
:deep(.pagination-wrapper .el-input),
:deep(.pagination-wrapper .el-input *),
:deep(.el-pagination .el-input),
:deep(.el-pagination .el-input *) {
  background: #23232a !important;
  background-color: #23232a !important;
  color: #909399 !important;
}

/* 最强力覆盖 - 包括所有状态 */
:deep(.el-pagination) input,
:deep(.el-pagination) input:focus,
:deep(.el-pagination) input:hover,
:deep(.el-pagination) .el-input__inner,
:deep(.el-pagination) .el-input__wrapper,
:deep(.el-pagination) .el-select,
:deep(.el-pagination) .el-select .el-input,
:deep(.el-pagination) .el-select .el-input__inner,
:deep(.el-pagination) .el-select .el-input__wrapper {
  background: #23232a !important;
  background-color: #23232a !important;
  color: #909399 !important;
  border: 1px solid #333 !important;
  border-color: #333 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 确保所有分页元素都没有白边 */
:deep(.el-pagination *),
:deep(.el-pagination *:before),
:deep(.el-pagination *:after) {
  background-color: transparent !important;
  border-color: #333 !important;
}

/* 分页容器背景 */
:deep(.el-pagination) {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 分页文本颜色 */
:deep(.el-pagination .el-pagination__total),
:deep(.el-pagination .el-pagination__jump) {
  color: #909399 !important;
}

.text-success {
  color: #67c23a;
}

.text-danger {
  color: #f56c6c;
}

:deep(.el-table__empty-block) {
  background: #23232a !important;
}

:deep(.el-table__empty-text) {
  color: #909399 !important;
}

:deep(.el-table .cell) {
  color: #909399 !important;
}

:deep(.el-table .ascending .sort-caret.ascending) {
  border-bottom-color: #909399;
}

:deep(.el-table .descending .sort-caret.descending) {
  border-top-color: #909399;
}

/* 自定义暗色选择框样式 */
.dark-select {
  --el-select-border-color-hover: #409eff;
  --el-select-input-focus-border-color: #409eff;
  --el-select-option-hover-background: #2a2a2a;
}

.dark-select :deep(.el-input__wrapper) {
  background-color: #1c1c1f !important;
  box-shadow: 0 0 0 1px #333 inset !important;
  border-radius: 4px;
}

.dark-select :deep(.el-input__inner) {
  color: #909399 !important;
  font-size: 14px;
}

.dark-select :deep(.el-input__inner::placeholder) {
  color: #606266 !important;
}

.dark-select :deep(.el-select__caret) {
  color: #606266 !important;
}

.dark-select :deep(.el-select__caret.is-reverse) {
  color: #409eff !important;
}

:deep(.el-select__popper.el-popper) {
  background: #1c1c1f !important;
  border: 1px solid #333 !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}

:deep(.el-select-dropdown__item) {
  color: #909399 !important;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}

:deep(.el-select-dropdown__item:hover),
:deep(.el-select-dropdown__item.hover) {
  background: #2a2a2a !important;
  color: #409eff !important;
}

:deep(.el-select-dropdown__item.selected) {
  background: #2a2a2a !important;
  color: #409eff !important;
  font-weight: bold;
}

:deep(.el-popper.is-light .el-popper__arrow::before) {
  background: #1c1c1f !important;
  border-color: #333 !important;
}

:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected) {
  background: #2a2a2a !important;
}

:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after) {
  color: #409eff !important;
  font-weight: bold;
}

:deep(.el-select-dropdown__empty) {
  color: #606266 !important;
  padding: 16px;
  text-align: center;
}

/* 选择框聚焦状态 */
.dark-select :deep(.el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 1px #409eff inset !important;
}

/* 选择框禁用状态 */
.dark-select :deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #2a2a2a !important;
  box-shadow: 0 0 0 1px #333 inset !important;
}

.dark-select :deep(.el-input.is-disabled .el-input__inner) {
  color: #606266 !important;
}

:deep(.el-range-editor.el-input__wrapper) {
  padding: 0 8px;
}

:deep(.el-range-separator) {
  padding: 0 2px;
  font-size: 12px;
  width: 20px;
}

:deep(.el-range-input) {
  width: 36%;
  font-size: 12px;
  padding: 0 2px;
}

:deep(.el-date-editor .el-range__close-icon) {
  margin: 0 2px;
  font-size: 12px;
}

:deep(.el-date-editor .el-range__icon) {
  margin: 0 2px;
  font-size: 14px;
}

:deep(.el-picker-panel) {
  width: auto;
}

:deep(.el-date-range-picker__content) {
  padding: 8px;
}

:deep(.el-date-range-picker__header) {
  padding: 4px 8px;
}

:deep(.el-picker-panel__sidebar) {
  width: 90px;
}

:deep(.el-picker-panel__sidebar .el-button) {
  padding: 8px 12px;
  font-size: 13px;
}
</style> 